<%-- 
    Document   : ViewProfile
    Created on : Dec 8, 2010, 4:22:16 AM
    Author     : Dhruv
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View Profile</title>
        <!--below css stylesheet defines page design-->
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
    </head>
    
    <body>
        <div id="wrapper">
            <!--SuperSeeker logo-->
            <img alt="." src="images/mylogo.jpg"/>

            <!--below is code for the menubar-->
            <ul id="blue">
                <!--each bar in the menu is a submit button with actions-->
                <!--the action attribute describes the event-->
                <form method="get" action="Logout.do">
                    <input type="submit" value="logout"/>
                </form>

                <form method="get" action="Toptags.do">
                    <input type="submit" value="topTags"/>
                </form>

                <form method="get" action="EditAccount.do">
                    <input type="submit" value="myAccount"/>
                </form>

                <form method="get" action="ViewAllTags.do">
                    <input type="submit" value="myTags"/>
                </form>

                <form method="get" action="ViewAllImages.do">
                    <input type="submit" value="myImages"/>
                </form>

                <form method="get" action="ViewAllFriends.do">
                    <input type="submit" value="myPals"/>
                </form>

                <form method="get" action="ReturnHome.do">
                    <input type="submit" value="home"/>
                </form>
            </ul>
            <!--end menubar-->

            <h1 id="clrBoth"><c:out value="${friendName}"/>'s Profile Page</h1>
            <!--display profile pic-->
            <img alt="." src="images/<c:out value="${friendProfilePic}"/>" height="200" width="250"/>
            <!--splits the page into 3 equal colums. id="innercontainer"
            contains the first 2 columns, while id="sidebar2" represents
            the rightmost column-->
            <div id="innercontainer">
                <!--represents the center column-->
                <div id="content">
                    <h2>Tags of <c:out value="${friendName}"/>'s images</h2>
                    <!--view mutual friends tags-->
                    <form method="get" action="ViewTag.do">
                        <c:forEach items="${friendsTags}" var="ftags">
                            <p class="submit"><input type="submit" name="viewTags" value="<c:out value="${ftags}"/>"/></p>
                        </c:forEach>
                    </form>
                </div>
                <!--represents the leftmost column-->
                <div id="innersidebar">
                    <h2><c:out value="${friendName}"/>'s Images</h2>
                    <!--all of your mutual friends images-->
                    <c:forEach items="${friendsImgs}" var="fimg">
                            <div class="curved-box">
                                <form method="get" action="ViewImage.do">
                                    <h2>Image</h2>
                                    <!--display image-->
                                    <p><input type="image" alt="." height="50" width="50" src="resources/<c:out value="${fimg.image}"/>"/></p>
                                    <!--display image metadata-->
                                    <h4 id="imgMetaData">Uploaded on: <c:out value="${fimg.datetime}"/></h4>
                                    <input type="hidden" name="uploader" value="<c:out value="${fimg.name}"/>"/>
                                    <input type="hidden" name="uploadedImg" value="<c:out value="${fimg.image}"/>"/>
                                    <input type="hidden" name="uploaderDT" value="<c:out value="${fimg.datetime}"/>"/>
                                </form>
                            </div>
                    </c:forEach>
                </div>                
            </div>
            <!--represents rightmost column-->
            <div id="sidebar2">
                <h2><c:out value="${friendName}"/>'s Friends</h2>
                <form method="get" action="ViewProfile.do">
                    <!--mutual friend's friends. you can only view their friends
                    profiles if you are their friends mutual friend too.-->
                    <c:forEach items="${friendsFriends}" var="ffriends">
                        <p class="submit"><input type="submit" name="mutFriend" value="<c:out value="${ffriends}"/>"/></p>
                    </c:forEach>
                </form>
            </div>
        </div>
    </body>
</html>
